function BBLoader( parentId , color , bgColor , speed , numElements , shape , direction )
{
    //direction is 0 or 1(left/right)
    this.parent = document.getElementById( parentId );
    this.color = color;
    this.bgColor = bgColor;
    this.shapes = ["circle","square","triangle"];
    this.shape = shape || this.shapes[Math.floor(Math.random()*this.shapes.length)] ;
    this.speed = speed;
    this.numElements = numElements || Math.floor(Math.random()*4)+2 ;
//possibilities for shape:
//-circle(default)
//-square
//-triangle
//- *.png image. Beware, it's going to be resized(depending on parent's size)
    
    this.loop = true ;
    
    this.width = this.parent.offsetWidth;
    this.height = this.parent.offsetHeight;
    
    window.requestAnimationFrame= window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    
    this.canvas = document.createElement("canvas");
//this id is quite unique I guess
    this.canvas.id = "BBLOADER"+Math.floor(Math.random()*10000000);
//fill parent
    this.canvas.style.width = "100%";
    this.canvas.style.height = "100%";
    this.canvas.style.backgroundColor = this.bgColor ;
    this.parent.appendChild( this.canvas );
//sets the minimum limit for canvas size
    if( this.canvas.offsetWidth < 20 || this.canvas.offsetHeight < 20 )
    {
        this.canvas.remove();
        alert( "Too small container!" );
        return false;
    }
    
    this.ctx=this.canvas.getContext("2d");
    this.ctx.fillStyle = this.bgColor ;
    this.ctx.strokeStyle = this.color ;
    
    
    this.draw = function(that)
    {
//console.log("BBLoader loop is running");//uncomment this and look @ the console to check if the loop's on
//clears whole canvas
        that.ctx.fillStyle = that.bgColor ;
        that.ctx.fillRect( 0 , 0 , that.canvas.width , that.canvas.height );
        /*  --- --- --- --- --- --- --- --- OUT OV TEMPLATE --- BEGIN --- --- --- --- --- --- --- --- --- */
        that.ctx.fillStyle = that.color ;
        for( var i = 0 ; i < that.numElements ; ++i )
        {
            var ang = that.angle + (Math.PI*2)/that.numElements*i;
            var x = that.distance * Math.sin( ang ) + that.canvas.width/2 ;
            var y = that.distance * Math.cos( ang ) + that.canvas.height/2 ;
            that.ctx.beginPath();
            switch( that.shape )
            {
                case "circle":
                {
                    that.ctx.arc(x,y,that.size,0,Math.PI*2);
                    break;
                }
                case "square":
                {
                    that.ctx.save();
                    that.ctx.translate(x,y);
                    that.ctx.rotate( that.rotationAngles[i] );
                    that.ctx.rect(-that.size/2,-that.size/2,that.size,that.size);
                    that.ctx.restore();
                    break;
                }
                case "triangle":
                {
                    that.ctx.save();
                    that.ctx.translate(x,y);
                    that.ctx.rotate( that.rotationAngles[i] );
                    that.ctx.moveTo(that.size/2,that.triangleH/3);
                    that.ctx.lineTo(-that.size/2,that.triangleH/3);
                    that.ctx.lineTo(0,-that.triangleH/3*2);
                    that.ctx.restore();
                    break;
                }
                case "image":
                {
                    that.ctx.save();
                    that.ctx.translate(x,y);
                    that.ctx.rotate( that.rotationAngles[i] );
                    that.ctx.drawImage( that.image , -that.size/2,-that.size/2 , that.size, that.size );
                    that.ctx.restore();
                    break;
                }
            }
            that.rotationAngles[i] = (that.rotationAngles[i] + that.directions[i] * that.speed/(50*that.numElements));
            that.rotationAngles[i] %= Math.PI*2;
            that.ctx.fill();
            that.angle += that.direction*that.speed/(100*that.numElements);
            that.angle %= Math.PI*2 ;
        }
        if( document.getElementById(that.canvas.id) === null )that.loop = false;
        /*  --- --- --- --- --- --- --- --- OUT OV TEMPLATE --- END --- --- --- --- --- --- --- --- --- */
        if( typeof(window.requestAnimationFrame) !== "function" )
            alert( "Your browser doesn't support modern animation devices. I guess you use Opera, Safari or old IE. Update your browser or get better/newer one. The old techniques of animating things aren't so good anymore and they're not woth to waste time on them, sorry. Let's be modern!" );
        else if( that.loop )window.requestAnimationFrame( function(){
            that.draw( that );
        });
    }
    
    /*  --- --- --- --- --- --- --- --- OUT OV TEMPLATE --- BEGIN --- --- --- --- --- --- --- --- --- */
    this.angle = 0;
    this.size = ( this.canvas.width > this.canvas.height ) ? this.canvas.height/8 : this.canvas.width/8 ;
    this.distance = ( this.canvas.width > this.canvas.height ) ? this.canvas.height/4 : this.canvas.width/4 ;
    
    this.direction = (typeof(direction) === "undefined") ? (Math.floor(Math.random()*2)) : direction ;
    this.direction = (this.direction) ? 1 : -1 ;
    this.rotationAngles = [] ;
    this.directions = [];
    for( i=0;i<this.numElements;++i )
    {
        this.rotationAngles[i] = 0 ;
        if(Math.floor(Math.random()*2))this.directions[i] = 1;
        else this.directions[i] = -1;
    }
    if( this.shape.toString().indexOf(".png") !== -1 )
    {
        this.size = this.size*3/2;
        this.image = new Image();
        this.image.src = this.shape ;
        this.image.addEventListener("load",function(){
            this.draw( this );
        }.bind(this));
        this.shape = "image";
    }
    if( this.shape === "triangle" )
    {
        this.triangleH = this.size*Math.sqrt(3)/2 ;
        this.size = this.size*3/2;
    }
    if( this.shape !== "image" )this.draw( this );
    /*  --- --- --- --- --- --- --- --- OUT OV TEMPLATE --- END --- --- --- --- --- --- --- --- --- */
    
}
//parent id should be provided here, but, you can just go ahead and use removeChild() on that parent
//but, in fact, this is more secure tool and should be used anyway to avoid senseless loops
function deleteBBLoader( id )
{
    var items = document.getElementById( id ).getElementsByTagName("canvas");
    for( var i in items )
    {
        if( items[i] != undefined && 
                items[i].id != undefined && 
                items[i].id.substring(0,8) === "BBLOADER" && 
                !isNaN(items[i].id.substring(8)) )
        {
            document.getElementById( items[0].id ).remove();
        }
            
    }
    
}